import { React, useState, useEffect } from "react";
import { Link, Route, Routes, useLocation, useNavigate, Navigate } from "react-router-dom"
import "antd/dist/antd.min.css";
import "./Admin.css";
import Drama from "../Drama/Drama"
import Home from "../Home/Home"
import { Menu, Layout, Breadcrumb } from "antd";

const { Header, Footer, Sider, Content } = Layout;

import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    CloudOutlined,
} from "@ant-design/icons";
import User from "../User/User";
import Store from "../Store/Store";


function getItem(label, key, icon, children, type) {
    return {
        key,
        icon,
        children,
        label,
        type,
    };
}
const MenuClickRouteName = {
    "item2": "/home",
    "item3": "/drama/dramas",
    "item4": "/drama/item4",
    "item5": "/store/stores",
    "item6": "/store/item6",
    "item7": "/user/users",
    "item8": "/user/item8"
}
const RouteNameMap = ["drama", "dramas", "item4", "store", "stores", "user", "home", "users"]
const breadcrumbNameMap = {
    "/drama": "剧本管理",
    "/drama/dramas": "剧本库",
    "/drama/item4": "占位",

    "/store": "店家管理",
    "/store/stores": "店家总览",

    "/user": "用户管理",
    "/user/users": "用户总览"
}

const items = [
    getItem("首页", "item2"),
    getItem("剧本管理", "sub1", null, [
        getItem("剧本库", "item3", null),
        getItem("占位", "item4", null),
    ]),
    getItem("店家管理", "sub2", null, [
        getItem("店家总览", "item5", null),
        getItem("占位", "item6", null),
    ]),
    getItem("用户管理", "sub3", null, [
        getItem("用户总览", "item7", null),
        getItem("占位", "item8", null),
        getItem("占位", "item9", null),
        getItem("占位", "item10", null),
    ]),
    getItem("审核管理", "sub4", null, [
        getItem("审核总览", "item11", null),
        getItem("剧本申请", "item12", null),
        getItem("店家申请", "item13", null),
    ]),
    getItem("系统管理", "sub5", null, [
        getItem("菜单管理", "item14", null),
        getItem("系统监控", "item15", null),
    ]),
    getItem("剧米", "item16", null),
];


const subMenuKeys = ["sub1", "sub2", "sub3", "sub4", "sub5"]

const GetBreadcrumbRoute = () => {

    const location = useLocation();
    const pathArray = location.pathname.split('/').filter(item => {
        if (RouteNameMap.indexOf(item) != -1) {
            return true
        }
    })

    const extraBreadcrumbItems = pathArray.map((_, index) => {
        const url = `/${pathArray.slice(0, index + 1).join('/')}`;
        return (
            <Breadcrumb.Item key={url}>
                <Link to={url}>{breadcrumbNameMap[url]}</Link>
            </Breadcrumb.Item>
        );
    })

    const breadcrumbItems = [
        <Breadcrumb.Item key="home">
            <Link to="/">主页</Link>
        </Breadcrumb.Item>,
    ].concat(extraBreadcrumbItems);
    return breadcrumbItems
}

function App() {
    const navigate = useNavigate()
    const breadcrumbItems = GetBreadcrumbRoute()

    const Menuclick = (item) => {
        const RoutePath = MenuClickRouteName[item.key]
        if (RoutePath == null) {
            navigate("/")

        }
        else {
            navigate(RoutePath)

        }
    }


    const [openKeys, setOpenKeys] = useState([""]);
    const onOpenChange = (keys) => {
        const latestOpenKey = keys.find((item) => openKeys.indexOf(item) === -1);
        if (subMenuKeys.indexOf(latestOpenKey) === -1) {
            setOpenKeys(keys);
        } else {
            setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
        }
    };

    const [collapsed, setCollapsed] = useState(false);
    const toggleCollapsed = () => {
        setCollapsed(!collapsed);
    };

    return (
        <div className="App">
            <Layout className="LayoutContainer">
                <Sider className="SiderContainer" trigger={null} collapsible collapsed={collapsed} collapsedWidth="54">

                    <div className="LogoContainer">{collapsed ? <CloudOutlined /> : "剧米管理后台"}</div>

                    <Menu
                        mode="inline"
                        theme="dark"
                        items={items}
                        className="MenuContainer"
                        defaultSelectedKeys={["item2"]}
                        openKeys={openKeys}
                        onOpenChange={onOpenChange}
                        onClick={Menuclick}
                    ></Menu>

                </Sider>

                <Layout className={collapsed ? "LayoutRightContainerCollapsed" : "LayoutRightContainer"}>
                    <Header className="HeaderContainer">
                        <div className="CollapseContainer" onClick={toggleCollapsed}>
                            {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                        </div>
                        <div>
                            <Breadcrumb className="BreadcrumbContainer">
                                {breadcrumbItems}
                            </Breadcrumb>
                        </div>
                    </Header>
                    <Content className="ContentContainer">
                        <Routes>

                            <Route exact path="/home" element={<Home></Home>}></Route>
                            <Route exact path="/drama/dramas" element={<Drama></Drama>}></Route>
                            <Route exact path="/store/stores" element={<Store></Store>}></Route>
                            <Route exact path="/user/users" element={<User></User>}></Route>
                            <Route exact path="*" element={<Navigate to="home"></Navigate>}></Route>


                        </Routes>
                    </Content>
                    <Footer className="FooterContainer">
                        <div>
                            <a href="https://beian.miit.gov.cn/">浙ICP备2021040262号-1</a>
                        </div>

                    </Footer>
                </Layout>
            </Layout>
        </div>
    );
}

export default App;
